<template>
  <view class="vip-page">
    <!-- Top Nav with gradient background -->

    <uv-sticky>
      <view class="nav" :style="{ paddingTop: statusBarPx + 'px' }">
        <view class="nav-inner">
          <text class="nav-close" @click="closePage">✕</text>
          <text class="nav-title">VIP 价格和计划</text>
          <view class="nav-right"></view>
        </view>
      </view>
    </uv-sticky>

    <scroll-view scroll-y class="scroll"
      :style="{ paddingTop: navHeightPx + 'px', paddingBottom: bottomSafePx + 24 + 'px' }">
      <!-- Plans -->
      <view class="plans">
        <view v-for="(plan, index) in plans" :key="plan.id" class="plan-item"
          :class="{ active: selectedPlanIndex === index }" @click="onSelectPlan(index)">
          <view class="plan-left">
            <view class="star">
              <!-- {{ selectedPlanIndex === index ? '★' : '☆' }} -->
              <image v-if="selectedPlanIndex === index" src="/static/images/tactics/active_icon.png"
                mode="scaleToFill" />
              <image v-else src="/static/images/tactics/default_icon.png" mode="scaleToFill" />
            </view>
          </view>
          <view class="best-container">
            <view class="plan-content-left">
              <view class="plan-content">
                <text class="price">{{ plan.typeName }}</text>
                <text class="subtitle">{{ plan.description }}</text>
              </view>
            </view>
            <view class="plan-content-right">
              {{  plan.discountPrice  }} 港币
            </view>
          </view>

          <view class="best-badge" v-if="plan.isBest">
            <text class="best-text">最佳优惠！</text>
          </view>
        </view>
      </view>

      <!-- Renew note -->
      <view class="note">
        订阅将在当前周期结束前不超过 24 小时内时自动续订。您随时可以在您我的-订阅提醒中取消续订。
      </view>

      <!-- Legal links -->
      <!-- <view class="legal-links">
        <text class="link" @click="openLink('privacy')">隐私政策</text>
        <text class="dot">·</text>
        <text class="link" @click="openLink('terms')">使用条款</text>
        <text class="dot">·</text>
        <text class="link" @click="restorePurchase">恢复购买</text>
      </view> -->

      <!-- Contact banner -->
      <view class="contact-title">联系我们获取折扣和问题解答！👇</view>

      <!-- Bottom CTAs -->
      <view class="cta-row">
        <button class="cta-btn danger" @click="payWithCrypto">
          <image src="/static/images/tactics/btc.png" mode="scaleToFill" />
          <text>使用加密货币支付</text>
        </button>
        <button class="cta-btn primary" @click="contactUs">
          <image style="width: 45rpx; height: 45rpx" src="/static/images/tactics/telegram.png" mode="scaleToFill" />

          <text>联系我们</text>
        </button>
      </view>

      <view :style="{ height: bottomSafePx + 'px' }"></view>
    </scroll-view>
  </view>
</template>

<script>
import { getMemberTypeList } from '@/api/vip'
export default {
  data() {
    const sys = uni.getSystemInfoSync()
    const statusBarPx = sys.statusBarHeight || 0
    const navHeightPx = statusBarPx + 56
    return {
      statusBarPx,
      navHeightPx,
      bottomSafePx: sys.safeAreaInsets ? sys.safeAreaInsets.bottom : 0,
      selectedPlanIndex: 2,
      plans: [
        {
          id: 'weekly',
          priceText: '港币 299.00 元',
          subtitle: '每周 高级服务',
          isBest: false,
        },
        {
          id: 'monthly',
          priceText: '港币 579.00 元',
          subtitle: '3 天 高级服务 免费试用–每月',
          isBest: false,
        },
        {
          id: 'quarter-best',
          priceText: '港币 1,629.00 元',
          subtitle: '3 个月 高级服务 + 自动交易',
          isBest: true,
        },
        {
          id: 'half-year',
          priceText: '港币 3,029.00 元',
          subtitle: '6 个月 高级服务 + 自动交易',
          isBest: false,
        },
        {
          id: 'yearly',
          priceText: '港币 5,588.00 元',
          subtitle: '年度 高级服务 + 自动交易',
          isBest: false,
        },
        {
          id: 'lifetime',
          priceText: '港币 7,749.00 元',
          subtitle: '终身 高级服务+ 自动交易',
          isBest: false,
        },
      ],
    }
  },
  onLoad() {
    getMemberTypeList().then(res => {
      console.log(res);
      this.plans = res.data
    })
  },
  methods: {
    closePage() {
      uni.navigateBack({ delta: 1 })
    },
    onSelectPlan(index) {
      this.selectedPlanIndex = index
    },
    openLink(type) {
      uni.showToast({ title: type === 'privacy' ? '隐私政策' : '使用条款', icon: 'none' })
    },
    restorePurchase() {
      uni.showToast({ title: '已尝试恢复购买', icon: 'none' })
    },
    payWithCrypto() {
      // 跳转到 USDT 充值页面
      uni.navigateTo({
        url: '/subPages/vip/usdt-recharge'
      })
    },
    contactUs() {
      // 跳转到客服页面
      uni.navigateTo({
        url: '/subPages/help/customer-service'
      })
    },
  },
}
</script>

<style lang="scss" scoped>
.vip-page {
  min-height: 100vh;
  background: #fff;
}

.nav {
  position: fixed;
  top: 0;
  right: 0;
  left: 0;
  background: linear-gradient(180deg, #e6fffb 0%, #f0fffd 100%);
}

.nav-inner {
  display: flex;
  align-items: center;
  height: 56px;
  padding: 0 16px;
}

.nav-close {
  width: 28px;
  font-size: 20px;
  color: #222;
}

.nav-title {
  flex: 1;
  margin-left: 8px;
  font-size: 20px;
  font-weight: 700;
  color: #223;
  text-align: left;
}

.nav-right {
  width: 28px;
}

.scroll {
  box-sizing: border-box;
}

.plans {
  padding: 16px;
}

.plan-item {
  position: relative;
  display: flex;
  gap: 12px;
  align-items: center;
  padding: 16px;
  margin-bottom: 12px;
  background: #fff;
  border-radius: 16px;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.04);
}

.plan-item.active {
  background: linear-gradient(90deg, #10cbb9 0%, #10dfcd 100%);
  box-shadow: none;
}

.plan-left {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
}
.best-container{
  display:flex;
  justify-content: space-between;
  width: 100%;
  align-items: center;
}
.plan-content-right{
  color: #06CBB6;
}
.star {
  font-size: 18px;
  color: #c5cbd0;

  image {
    width: 40rpx;
    height: 35rpx;

    // height: 30rpx;
  }
}

.plan-item.active .star {
  color: #fff;

}
.plan-item.active .plan-content-right{
  color: #fff;
}

.plan-content {
  flex: 1;
}

.price {
  display: block;
  font-size: 18px;
  font-weight: 700;
  color: #1f2937;
}

.subtitle {
  display: block;
  margin-top: 6px;
  font-size: 14px;
  color: #7b8794;
}

.plan-item.active .price,
.plan-item.active .subtitle {
  color: #fff;
}

.best-badge {
  position: absolute;
  top: 30%;
  right: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 229rpx;
  height: 87rpx;
  background: url('/static/images/tactics/hot-icon.png') no-repeat;
  background-size: 100% 100%;

  text {
    display: flex;
    margin-top: 3rpx;
    color: #ffe88b;
    transform: rotate(-5deg);
  }
}

.fire {
  font-size: 16px;
}

.best-text {
  font-size: 12px;
  font-weight: 700;
}

.note {
  padding: 8px 16px 0;
  font-size: 12px;
  line-height: 1.6;
  color: #8a949e;
}

.legal-links {
  display: flex;
  gap: 10px;
  align-items: center;
  justify-content: center;
  margin: 12px 0;
  font-size: 13px;
  color: #8a949e;
}

.link {
  color: #8a949e;
}

.dot {
  color: #c7ced6;
}

.contact-title {
  margin: 8px 0 12px;
  font-size: 18px;
  font-weight: 700;
  color: #222;
  text-align: center;
}

.cta-row {
  display: flex;
  gap: 16px;
  padding: 0 16px 16px;
}

.cta-btn {
  display: flex;
  flex: 1;
  align-items: center;
  justify-content: center;
  height: 48px;
  font-size: 16px;
  border-radius: 20rpx;

  image {
    width: 30rpx;
    height: 30rpx;
    margin-right: 10rpx;
  }
}

.cta-btn .icon {
  font-size: 18px;
}

.cta-btn.primary {
  color: #fff;
  background: #06cbb6;
}

.cta-btn.danger {
  color: #fff;
  background: #ff5b50;
}
</style>
